<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div :class="['Mall4j page-order-detail',store.locale === 'en'?'order-detail-en':'']">
    <div class="content">
      <div class="crumbs">
        <a
          class="item-a"
          @click="userCenter()"
        >{{ $t('orderDetails.personalCenter') }}</a>
        <span class="arrow">></span>
        <span class="item-span">{{ $t('orderDetails.orderDetails') }}</span>
      </div>
      <!-- 订单状态 -->
      <div class="status-process">
        <div class="status-box">
          <div class="order-number">
            {{ $t('orderDetails.orderNumber') }}：{{ orderNumber }}
          </div>
          <div class="status">
            {{
              [
                '',
                $t('obligation'),
                $t('pendingDelivery'),
                $t('pendingReceipt'),
                $t('pendinEvaluation'),
                $t('completed'),
                $t('canceled'),
                $t('grouping')
              ][orderInfo.status]
            }}
          </div>
          <div
            v-if="((orderInfo.orderInvoiceId && orderInfo.status !== 6) || (orderInfo.orderInvoiceId && (orderInfo.status === 6 && orderInfo.finalRefundId))) && (!orderInfo.refundStatus || orderInfo.refundStatus === 4)"
            :class="['invoice-detail',$t('language') === 'zh_CN'?'':'en-width']"
            @click="toInvoice(orderNumber)"
          >
            {{ $t('invoice.viewInvoiceDetail') }}
          </div>
          <div
            v-if="orderInfo.status === 1 && betweenTime.signs === 1"
            class="description"
          >
            {{ $t('orderDetails.remainingTime') }} {{ betweenTime.min + ':' + betweenTime.sec }}
          </div>
          <div
            v-if="orderInfo.cancelTime === null"
            class="action"
          >
            <a
              v-if="orderInfo.status === 1"
              href="javascript:void(0);"
              class="action-a red"
              @click="toPayment()"
            >{{ $t('orderDetails.payNow') }}</a>
            <a
              v-if="orderInfo.status === 1"
              href="javascript:void(0);"
              class="action-a"
              @click="showTips = true"
            >{{ $t('orderDetails.cancellation') }}</a>
          </div>
        </div>
        <div class="process-box">
          <div class="tip">
            {{ $t('orderDetails.informationTips') }}
          </div>
          <div class="process">
            <div :class="['item', orderInfo.status >= 1 ? 'active' : '']">
              <div class="img process01" />
              <div class="text">
                {{ $t('orderDetails.submitOrder') }}
              </div>
              <div class="time">
                {{ orderInfo.createTime }}
              </div>
            </div>
            <div
              :class="[
                'item',
                orderInfo.status >= 2 && orderInfo.payTime !== null
                  ? 'active'
                  : ''
              ]"
            >
              <div class="img process02" />
              <div class="text">
                {{ $t('orderDetails.buyerPayment') }}
              </div>
              <div class="time">
                {{ orderInfo.payTime }}
              </div>
            </div>
            <div
              :class="[
                'item',
                orderInfo.status >= 3 && orderInfo.dvyTime !== null
                  ? 'active'
                  : ''
              ]"
            >
              <div class="img process03" />
              <div class="text">
                {{ $t('orderDetails.goodsOut') }}
              </div>
              <div class="time">
                {{ orderInfo.dvyTime }}
              </div>
            </div>
            <div
              :class="[
                'item',
                orderInfo.status >= 3 && orderInfo.dvyTime !== null
                  ? 'active'
                  : ''
              ]"
            >
              <div class="img process04" />
              <div class="text">
                {{ $t('orderDetails.waitingForReceipt') }}
              </div>
              <div class="time">
                {{ orderInfo.dvyTime }}
              </div>
            </div>
            <div
              :class="[
                'item',
                orderInfo.status >= 5 && orderInfo.status!==6 && orderInfo.fianllyTime !== null
                  ? 'active'
                  : ''
              ]"
            >
              <div class="img process05" />
              <div class="text">
                {{ $t('orderDetails.orderCompletion') }}
              </div>
              <div class="time">
                {{ orderInfo.finallyTime }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /订单状态 -->
      <!-- 配送信息 -->
      <div
        v-if="deliveryList.length && orderInfo.status !==6"
        class="delivery-box"
      >
        <div
          v-if="deliveryList.length > 1"
          class="box-tab"
        >
          <div
            v-for="(item, index) in deliveryList"
            :key="index"
            :class="indexs === index ? 'item active' : 'item'"
            @click="onClickTabDelivery(index)"
          >
            {{ $t('orderDetails.packages') }}{{ index + 1 }}
          </div>
        </div>
        <div
          v-if="deliveryExpresse && (deliveryList.length > 1 || deliveryExpresse.deliveryType !== 3)"
          class="box-con"
        >
          <div class="deliver-msg">
            <div class="d-item">
              <div class="text">
                {{ $t('submitOrder.deliveryMethod') }}：
              </div>
              <div class="res">
                {{ [$t('submitOrder.courierDelivery'),$t('submitOrder.courierDelivery'),$t('orderDetails.buyerPickup'),$t('orderDetails.noExpressDelivery'),$t('orderDetails.sameCityDelivery')][deliveryExpresse.deliveryType] }}
              </div>
            </div>
            <div class="d-item">
              <div class="text">
                {{ $t('orderDetails.shipmenttime') }}：
              </div>
              <div class="res">
                {{ deliveryExpresse.createTime }}
              </div>
            </div>
            <div
              v-if="deliveryExpresse.deliveryDto"
              class="d-item"
            >
              <div class="text">
                {{ $t('orderDetails.courierCompany') }}：
              </div>
              <div class="res">
                {{ deliveryExpresse.deliveryDto.companyName }}
              </div>
            </div>
            <div
              v-if="deliveryExpresse.deliveryDto"
              class="d-item"
            >
              <div class="text">
                {{ $t('orderDetails.waybillNumber') }}：
              </div>
              <div class="res">
                {{ deliveryExpresse.deliveryDto.dvyFlowId }}
              </div>
            </div>
            <div
              class="d-goods"
              :class="{ over: deliveryExpresse.orderItems.length > 5 }"
            >
              <div
                class="arrow prev"
                :class="{
                  disable:
                    deliveryExpresse.orderItems.length - 5 <= 0 ||
                    offsetCount < 1
                }"
                @click="prevItem"
              />
              <div
                class="arrow next"
                :class="{
                  disable:
                    deliveryExpresse.orderItems.length - 5 <= 0 ||
                    offsetCount >= deliveryExpresse.orderItems.length - 5
                }"
                @click="nextItem"
              />
              <div class="item-goods">
                <div
                  ref="carouserRef"
                  class="goods-box"
                >
                  <div
                    v-for="(orderItem, index) in deliveryExpresse.orderItems"
                    :key="index"
                    class="item"
                  >
                    <div class="img">
                      <img-show :src="orderItem.pic" />
                      <div class="number">
                        ×{{ orderItem.prodCount }}
                      </div>
                    </div>
                    <div class="name">
                      {{ orderItem.prodName }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            v-if="deliveryExpresse.deliveryType !== 3 && deliveryExpresse.deliveryType !== 4"
            class="logistics"
          >
            <div
              v-if="deliveryExpresse"
              class="l-tit"
            >
              <span class="text">{{ $t('orderDetails.LogisticsInformation') }}：</span>
            </div>
            <div class="logistics-box">
              <div v-if="deliveryExpresse.deliveryDto.traces && deliveryExpresse.deliveryDto.traces.length">
                <div
                  v-for="(trace, index) in deliveryExpresse.deliveryDto.traces"
                  :key="index"
                  class="item"
                >
                  <div class="time">
                    {{ trace.acceptTime }}
                  </div>
                  <div class="text">
                    {{ trace.acceptStation }}
                  </div>
                </div>
              </div>
              <div
                v-if="!deliveryExpresse.deliveryDto.traces || !deliveryExpresse.deliveryDto.traces.length"
                class="item"
              >
                {{ $t('orderDetails.logisticsTips1') }}
              </div>
              <div
                v-if="orderInfo.status >= 3 && orderInfo.dvyTime !== null"
                class="item"
              >
                <div class="time">
                  {{ orderInfo.dvyTime }}
                </div>
                <div class="text">
                  {{ $t('orderDetails.logisticsTips2') }}
                </div>
              </div>
              <div
                v-if="orderInfo.status >= 2 && orderInfo.payTime !== null"
                class="item"
              >
                <div class="time">
                  {{ orderInfo.payTime }}
                </div>
                <div class="text">
                  {{ $t('orderDetails.logisticsTips3') }}
                </div>
              </div>
              <div
                v-if="orderInfo.status >= 1"
                :class="['item', orderInfo.status >= 1?'left-line':'']"
              >
                <div class="time">
                  {{ orderInfo.createTime }}
                </div>
                <div class="text">
                  {{ $t('orderDetails.logisticsTips4') }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /配送信息 -->
      <!-- 订单信息 -->
      <div class="order-info">
        <!-- 收货信息/自提信息（orderMold=1虚拟商品不展示收货/自提信息） -->
        <div
          v-if="orderInfo.orderMold !== 1"
          class="item"
        >
          <div class="tit">
            {{ [$t('orderDetails.receiptInformation'), $t('orderDetails.receiptInformation'), $t('orderDetails.selfPickupInformation'), $t('orderDetails.receiptInformation'), $t('orderDetails.receiptInformation')][dvyType] }}
          </div>
          <div class="con">
            <div class="con-item">
              <span class="item-tit">{{ [$t('orderDetails.receiver'), $t('orderDetails.receiver'), $t('orderDetails.picker'), $t('orderDetails.receiver'), $t('orderDetails.receiver')][dvyType] }}：</span>
              <span class="item-con">{{ dvyType===2?stationUserName:userAddrDto.receiver }}</span>
            </div>
            <div class="con-item">
              <span class="item-tit">{{ $t('orderDetails.contactInformation') }}：</span>
              <span class="item-con">{{ dvyType===2?stationUserMobile:userAddrDto.mobile }}</span>
            </div>
            <div class="con-item">
              <span class="item-tit">{{ [$t('orderDetails.receiptAddress'), $t('orderDetails.receiptAddress'), $t('orderDetails.pickupAddress'), $t('orderDetails.receiptAddress'), $t('orderDetails.receiptAddress')][dvyType] }}：</span>
              <span class="item-con">{{ dvyType===2?stationAddress:userAddrDto.province+userAddrDto.city+userAddrDto.area+userAddrDto.addr }}</span>
            </div>
          </div>
        </div>
        <!-- 配送信息（orderMold=1虚拟商品不展示配送信息） -->
        <div
          v-if="orderInfo.orderMold !== 1"
          class="item"
        >
          <div class="tit">
            {{ $t('orderDetails.deliveryInformation') }}
          </div>
          <div class="con">
            <div class="con-item">
              <span class="item-tit">{{ $t('orderDetails.deliveryMethod') }}：</span>
              <span
                v-if="dvyType || dvyType===0"
                class="item-con"
              >{{
                [$t('orderDetails.generalDelivery'), $t('orderDetails.generalDelivery'), $t('orderDetails.buyerPickup'), $t('orderDetails.noExpressDelivery'), $t('orderDetails.sameCityDelivery')][dvyType]
              }}</span>
              <span
                v-if="!(dvyType || dvyType===0)"
                class="item-con"
              >{{ $t('orderDetails.none') }}</span>
            </div>
            <div
              v-if="dvyType!==2"
              class="con-item"
            >
              <span class="item-tit">{{ $t('orderDetails.shippingFee') }}：</span>
              <span class="item-con">￥{{ parsePrice(orderInfo.transfee)[0] }}.{{
                parsePrice(orderInfo.transfee)[1]
              }}</span>
            </div>
          </div>
        </div>

        <!--
          虚拟商品-券码列表显隐：
          1、订单状态为status==1“待支付”时隐藏
          2、订单状态为status==6“已取消”时
            2.1 含有退款编号（即退款成功）时显示
            2.2 不含退款编号（即取消支付）时隐藏
          3、订单状态status != 7（status:7拼团中）时显示
          4、writeOffNum!==0 需要核销的虚拟商品才显示
        -->
        <div
          v-if="orderInfo.orderMold === 1 &&
            orderInfo.status !== 1 &&
            orderInfo.status !== 7 &&
            ((orderInfo.status === 6 && orderInfo.orderItemDtos[0].refundSn) ||orderInfo.status !== 6) &&
            orderInfo.writeOffNum !== 0
          "
          class="item virtual-goods-code"
        >
          <!-- 待使用/未使用 (unusedCount待使用的核销券) -->
          <div
            v-if="unusedCount && orderInfo.status !== 6 && !isExpired"
            class="tit"
          >
            {{ $t('orderDetails.toBeUsed') }}（{{ unusedCount }}{{ $t('orderDetails.sheets') }}）
          </div>
          <!-- 已过期 -->
          <div
            v-if="unusedCount && orderInfo.status !== 6 && isExpired"
            class="tit"
          >
            {{ $t('coupons.expired') }}（{{ unusedCount }}{{ $t('orderDetails.sheets') }}）
          </div>
          <!-- 确认收货(已完成) & 没有待核销的券码 -->
          <div
            v-if="orderInfo.status === 5 && !unusedCount"
            class="tit"
          >
            {{ $t('orderDetails.used') }}（{{ orderInfo.orderItemDtos[0].prodCount - unusedCount }}{{ $t('orderDetails.sheets') }}）
          </div>
          <!-- 退款成功 -->
          <div
            v-if="orderInfo.status === 6 && orderInfo.orderItemDtos[0].refundSn"
            class="tit"
          >
            {{ $t('orderDetails.used') }}（{{ orderInfo.orderItemDtos[0].prodCount - unusedCount }}{{ $t('orderDetails.sheets') }}）
          </div>
          <div class="con">
            <!-- 券码列表 -->
            <div
              v-for="(item,index) in virtualInfoList"
              :key="index"
              class="con-item"
            >
              <!-- isWriteOff:0未使用 1已使用 -->
              <div :class="{'used': item.isWriteOff === 1 || orderInfo.status === 6 || isExpired}">
                <div class="item-tit">
                  {{ $t('orderDetails.voucherCode') }}<span v-if="virtualInfoList.length > 1">{{ index+1 }}</span>：
                </div>
                <span class="code">{{ item.writeOffCode }}</span>
                <span
                  v-if="item.isWriteOff === 0 && orderInfo.status === 6 && orderInfo.orderItemDtos[0].refundSn"
                  class="grey"
                >({{ $t('orderDetails.refunded') }})</span>
                <span
                  v-else-if="isExpired && item.isWriteOff === 0"
                  class="grey"
                >({{ $t('coupons.expired') }})</span>
                <span
                  v-else-if="item.isWriteOff === 1"
                  class="grey"
                >({{ $t('orderDetails.used') }})</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 全部留言（虚拟商品）-->
        <div
          v-if="orderInfo.orderMold === 1
            && virtualRemarks.length"
          class="item all-msg"
        >
          <div class="tit">
            {{ $t('submitOrder.allMessages') }}
          </div>
          <div class="con">
            <div
              v-for="(item,index) in virtualRemarks"
              :key="index"
              class="con-item"
            >
              <div class="item-tit">
                {{ item.name }}：
              </div>
              <div class="msg-con">
                {{ item.value }}
              </div>
            </div>
          </div>
        </div>

        <!-- 付款信息 -->
        <div
          v-if="orderInfo.status>1 && orderInfo.payType"
          class="item"
        >
          <div class="tit">
            {{ $t('orderDetails.paymentInformation') }}
          </div>
          <div class="con">
            <!-- 支付方式 -->
            <div class="con-item">
              <span class="item-tit">{{ $t('orderDetails.paymentMethod') }}：</span>
              <!-- <span class="item-con">{{$t('orderDetails.onlinePayment')}}</span> -->
              {{ [$t('payment.pointPay'),$t('payment.wechatPay'),$t('payment.aliPay'),$t('payment.wechatPay'),$t('payment.wechatPay'),$t('payment.wechatPay'),$t('payment.aliPay'),$t('payment.aliPay'),$t('payment.wechatPay'),$t('payment.balancePay')][orderInfo.payType] }}
            </div>
            <!-- 付款时间 -->
            <div class="con-item">
              <span class="item-tit">{{ $t('orderDetails.paymentTime') }}：</span>
              <span class="item-con">{{ orderInfo.payTime }}</span>
            </div>
          </div>
        </div>
        <!-- 订单备注 -->
        <div class="item">
          <div class="tit">
            {{ $t('orderDetails.orderRemarks') }}
          </div>
          <div class="con">
            <div class="con-item">
              <span class="item-con">{{ orderInfo.remarks }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- /订单信息 -->
      <!-- 商品信息 -->
      <div class="goods-box">
        <div class="goods-con">
          <div class="shop">
            <span class="name">{{ $t('chat.stores') }}：</span>
            <a
              href="javascript:void(0)"
              class="name"
              @click="toShopPage(orderInfo.shopId)"
            >{{ orderInfo.shopName }}</a>
          </div>
          <div class="order-table">
            <table
              cellpadding="0"
              class="box"
            >
              <tbody>
                <tr class="box-tit">
                  <th style="text-align: left; padding-left: 90px;">
                    {{ $t('products') }}
                  </th>
                  <th
                    width="100"
                    class="tal"
                  >
                    {{ $t('quantity') }}
                  </th>
                  <th width="140">
                    {{ $t('priceOne') }}
                  </th>
                  <th width="140">
                    {{ $t('totalAll') }}
                  </th>
                  <th width="140">
                    {{ $t('operation') }}
                  </th>
                </tr>
                <tr
                  v-for="(prod, prodIndex) in orderInfo.orderItemDtos"
                  :key="prodIndex"
                  class="box-tr"
                >
                  <td>
                    <div class="goods-info">
                      <a
                        href="javascript:void(0);"
                        class="img"
                        @click="toDetail(prod)"
                      >
                        <ImgShow :src="prod.pic" />
                      </a>
                      <div class="name-sku">
                        <a
                          href="javascript:void(0);"
                          class="name"
                          @click="toDetail(prod)"
                        >{{ prod.prodName }}</a>
                        <span class="sku">{{ prod.skuName }}</span>
                        <span
                          v-if="prod.preSellTime"
                          class="sku"
                        > {{ formatDate(prod.preSellTime) }}&nbsp;{{ $t('prodDetail.startShipping') }}</span>
                      </div>
                    </div>
                    <!-- 赠品：多件商品时展示 -->
                    <div
                      v-if="orderInfo.orderItemDtos.length > 1 && prod.giveawayList && prod.giveawayList.length"
                      class="gift-info"
                    >
                      <div
                        v-for="gitfItem in prod.giveawayList"
                        :key="gitfItem.orderItemId"
                        class="gift-item"
                        @click="toProdDetails(gitfItem.prodId)"
                      >
                        <span class="name">{{ '【' + $t('prodDetail.gift') + '】' + gitfItem.prodName }}</span>
                        <span class="num">{{ gitfItem.skuName || '' }} ×{{ gitfItem.prodCount }}</span>
                      </div>
                    </div>
                    <!-- / 赠品 -->
                  </td>
                  <td>
                    <div class="goods-number">
                      ×{{ prod.prodCount }}
                    </div>
                  </td>
                  <td>
                    <span class="price">￥{{ parsePrice(prod.price)[0] }}.{{
                      parsePrice(prod.price)[1]
                    }}</span>
                  </td>
                  <td>
                    <span class="price">￥{{ parsePrice(prod.productTotalAmount)[0] }}.{{
                      parsePrice(prod.productTotalAmount)[1]
                    }}</span>
                  </td>

                  <td>
                    <div class="action">
                      <!-- <a href="javascript:void(0)"
                         @click="payNow(prod.prodId,orderInfo.status)"
                      :class="['action-btn', orderInfo.status>4?'default':'active']">{{['','立即付款','提醒卖家','确认收货','发表评论','再次购买','立即购买'][5]}}</a>-->
                      <!-- 退款条件：拟退款条件，还有未知判定条件 -->
                      <!-- 虚拟商品-申请退款
                        1、canAllRefund允许退款
                        2、orderType==4虚拟商品
                          2.1 需要核销且还有未核销的券码
                          2.2 无需核销
                        3、金额为0且无使用积分时不显示
                      -->
                      <a
                        v-if="
                          orderInfo.canAllRefund &&
                            !prod.refundSn &&
                            (prod.actualTotal || (!prod.actualTotal && prod.useScore)) &&
                            orderInfo.orderType !== 3 &&
                            orderInfo.orderMold === 1 &&
                            ((orderInfo.writeOffNum !== 0 && unusedCount) || orderInfo.writeOffNum === 0)
                        "
                        href="javascript:void(0)"
                        :class="['action-btn']"
                        @click="toApplyReturn(prod.orderItemId, orderInfo.orderMold === 1 ? 2 : 1)"
                      >{{ $t('orderDetails.requestRefund') }}</a>
                      <a
                        v-if="
                          (prod.actualTotal || (!prod.actualTotal && prod.useScore)) &&
                            orderInfo.canRefund &&
                            !prod.refundSn &&
                            orderInfo.orderType !== 3 &&
                            orderInfo.orderMold !== 1
                        "
                        href="javascript:void(0)"
                        :class="['action-btn']"
                        @click="toApplyReturn(prod.orderItemId, 2)"
                      >{{ $t('orderDetails.requestRefund') }}</a>
                      <a
                        v-if="prod.refundSn"
                        href="javascript:void(0)"
                        :class="['action-btn']"
                        @click="
                          toViewRefund(
                            prod.refundSn,
                            2,
                            prod.orderItemId,
                            prod.returnMoneySts
                          )
                        "
                      >{{ $t('orderDetails.viewRefund') }}</a>
                      <a
                        v-if="orderInfo.status === 4"
                        href="javascript:void(0)"
                        :class="['action-btn']"
                      >{{ $t('orderDetails.evaluation') }}</a>
                      <a
                        v-if="(orderInfo.status > 4 || orderInfo.cancelTime !==null) && orderInfo.status !== 7"
                        href="javascript:void(0)"
                        :class="['action-btn']"
                        @click="toProdDetail(prod.prodId,prod.useScore)"
                      >{{ $t('orderDetails.repurchase') }}</a>
                    </div>
                  </td>
                </tr>
              </tbody>

              <!-- 赠品：单个商品时展示 -->
              <tbody v-if="giveawayList && giveawayList.length">
                <tr
                  v-for="prod in giveawayList"
                  :key="prod.orderItemId"
                  class="box-tr"
                >
                  <td>
                    <div class="goods-info">
                      <router-link
                        :to="'/detail?prodId=' + prod.prodId"
                        class="img"
                        target="_blank"
                      >
                        <ImgShow :src="prod.pic" />
                      </router-link>
                      <div class="name-sku">
                        <router-link
                          :to="'/detail?prodId=' + prod.prodId"
                          class="name"
                          target="_blank"
                        >
                          {{ prod.prodName }}
                        </router-link>
                        <div class="sku">
                          <span class="gift-icon">{{ $t('prodDetail.gift') }}</span>
                          <span>{{ prod.skuName }}</span>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="goods-number">
                      ×{{ prod.prodCount }}
                    </div>
                  </td>
                  <td>
                    <span class="price">-</span>
                  </td>
                  <td>
                    <span class="price">-</span>
                  </td>

                  <td />
                </tr>
                <!-- / 赠品 -->
              </tbody>
            </table>
            <div class="total-return">
              <!-- 申请退款 -->
              <!-- 金额为0且无使用积分时不显示 -->
              <a
                v-if="
                  orderInfo.canRefund &&
                    orderInfo.canAllRefund &&
                    !orderInfo.orderItemDtos.refundSn &&
                    orderInfo.orderType !== 3
                    && orderInfo.orderMold !== 1
                    && ((orderInfo.orderScore && !orderInfo.actualTotal) || orderInfo.actualTotal)
                "
                href="javascript:void(0)"
                class="action-btn"
                @click="toApplyReturn(orderInfo.orderItemDtos.orderItemId, 1)"
              >{{ $t('orderDetails.refundsEntireOrders') }}</a>
            </div>
          </div>

          <!-- 商品总额与优惠明细 -->
          <div class="goods-total">
            <!-- 商品总额 -->
            <div class="item">
              <span class="tit">{{ $t('orderDetails.totalMerchandise') }}：</span>
              <span class="price">￥{{ parsePrice(orderInfo.total)[0] }}.{{
                parsePrice(orderInfo.total)[1]
              }}</span>
            </div>
            <!-- 商品运费 -->
            <div
              v-if="orderInfo.orderMold !== 1"
              class="item"
            >
              <span class="tit">{{ $t('orderDetails.productShipping') }}：</span>
              <span class="price"><span
                v-if="orderInfo.transfee && orderInfo.status === 2 && orderInfo.isRefunding"
                style="margin-right: 8px;"
              >
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  :content="$t('applyReturn.refundBeforeShippingTips')"
                >
                  <template #reference>
                    <el-icon><Warning /></el-icon>
                  </template>
                </el-popover></span>￥{{ parsePrice(new Big(orderInfo.transfee||0).plus(Math.abs(orderInfo.freeTransfee||0)).valueOf())[0] }}.{{
                parsePrice(new Big(orderInfo.transfee||0).plus(Math.abs(orderInfo.freeTransfee||0)).valueOf())[1]
              }}
              </span>
            </div>

            <!-- 店铺折扣 -->
            <div
              v-if="orderInfo.shopMemberAmount"
              class="item"
            >
              <span class="tit"> {{ $t('submitOrder.shopDiscount') }}：</span>
              <span class="price gray">-￥{{ parsePrice(orderInfo.shopMemberAmount)[0] }}.{{
                parsePrice(orderInfo.shopMemberAmount)[1]
              }}</span>
            </div>
            <!-- 运费减免 -->
            <div
              v-if="orderInfo.freeTransfee || orderInfo.platformFreeFreightAmount"
              class="item"
            >
              <span class="tit">{{ $t('orderDetails.shippingDiscount') }}：</span>
              <span class="price gray">- ￥{{ parsePrice(Math.abs(orderInfo.freeTransfee || orderInfo.platformFreeFreightAmount))[0] }}.{{
                parsePrice(Math.abs(orderInfo.freeTransfee || orderInfo.platformFreeFreightAmount))[1]
              }}</span>
            </div>
            <!-- 平台优惠券 -->
            <div
              v-if="orderInfo.platformCouponAmount"
              class="item"
            >
              <span class="tit">{{ $t('submitOrder.platformCoupons') }}：</span>
              <span class="price gray">- ￥{{ parsePrice(orderInfo.platformCouponAmount)[0] }}.{{
                parsePrice(orderInfo.platformCouponAmount)[1]
              }}</span>
            </div>
            <!-- 积分抵扣 -->
            <div
              v-if="orderInfo.scoreAmount"
              class="item"
            >
              <span class="tit">{{ $t('submitOrder.pointsCredit') }}：</span>
              <span class="price gray">- ￥{{ parsePrice(orderInfo.scoreAmount)[0] }}.{{
                parsePrice(orderInfo.scoreAmount)[1]
              }}</span>
            </div>
            <!-- 会员折扣 -->
            <div
              v-if="orderInfo.memberAmount"
              class="item"
            >
              <span class="tit">{{ $t('submitOrder.memberDiscount') }}：</span>
              <span class="price gray">- ￥{{ parsePrice(orderInfo.memberAmount)[0] }}.{{
                parsePrice(orderInfo.memberAmount)[1]
              }}</span>
            </div>
            <!-- 店铺优惠券 -->
            <div
              v-if="orderInfo.shopCouponMoney"
              class="item"
            >
              <span class="tit">{{ $t('orderDetails.storeCoupons') }}：</span>
              <span class="price gray">- ￥{{ parsePrice(orderInfo.shopCouponMoney)[0] }}.{{
                parsePrice(orderInfo.shopCouponMoney)[1]
              }}</span>
            </div>
            <!-- 促销满减 -->
            <div
              v-if="orderInfo.discountMoney"
              class="item"
            >
              <span class="tit">{{ $t('submitOrder.promotionalSale') }}：</span>
              <span class="price gray">- ￥{{ parsePrice(orderInfo.discountMoney)[0] }}.{{
                parsePrice(orderInfo.discountMoney)[1]
              }}</span>
            </div>
            <!-- 套餐减免 -->
            <div
              v-if="orderInfo.shopComboAmount"
              class="item"
            >
              <span class="tit">{{ $t('submitOrder.packageOffer') }}：</span>
              <span class="price gray">- ￥{{ parsePrice(orderInfo.shopComboAmount)[0] }}.{{
                parsePrice(orderInfo.shopComboAmount)[1]
              }}</span>
            </div>
            <!-- 拼团/秒杀 -->
            <div
              v-if="orderInfo.orderType && orderInfo.orderType!==3 && orderInfo.reduceAmount"
              class="item"
            >
              <span class="tit">{{ orderInfo.orderType === 1 ? $t('index.group') : $t('index.spike') }}{{ $t('cart.offers') }}：</span>
              <span class="price gray">- ￥{{ parsePrice(discountAmount)[0] }}.{{
                parsePrice(discountAmount)[1]
              }}</span>
            </div>
            <!-- 商家改价(只允许减价) -->
            <div
              v-if="orderInfo.shopChangeFreeAmount"
              class="item"
            >
              <span class="tit">{{ $t('orderDetails.merchantsModifyPrices') }}：</span>
              <span class="price gray">{{ orderInfo.shopChangeFreeAmount<0?'+':'-' }}￥{{ parsePrice(Math.abs(orderInfo.shopChangeFreeAmount))[0] }}.{{
                parsePrice(Math.abs(orderInfo.shopChangeFreeAmount))[1]
              }}</span>
            </div>

            <!-- 商品总优惠 -->
            <!-- 应付金额/实付金额 -->
            <div class="item">
              <span class="tit">{{
                orderInfo.status === 1 ? $t('orderDetails.amountPayable') : $t('orderDetails.actualAmount')
              }}</span>
              <span class="price big">
                <span v-if="orderInfo.actualTotal">￥{{ parsePrice(orderInfo.actualTotal)[0] }}.{{
                  parsePrice(orderInfo.actualTotal)[1]
                }}</span>
                <span v-if="orderInfo.actualTotal && orderInfo.orderScore">+</span>
                <span v-if="orderInfo.orderScore">{{ orderInfo.orderScore }} {{ $t('orderDetails.points') }}</span>
              </span>
            </div>
          </div>
          <!-- 商品总额与优惠明细 end -->

          <!-- 提示弹窗 -->
          <div
            v-if="showTips"
            class="popup-mask"
          />
          <div
            v-if="showTips"
            class="popup-box"
          >
            <div class="tit">
              <div class="text">
                {{ $t('tips') }}
              </div>
              <div
                class="close"
                @click="showTips = 0"
              />
            </div>
            <div class="con">
              <div class="tip">
                <div class="tip-icon warning" />
                <div class="tip-info">
                  <div class="result">
                    {{ $t('orderDetails.confirmCancellation') }}
                  </div>
                  <div class="date">
                    {{ $t('orderDetails.confirmCancellationTips') }}
                  </div>
                  <div class="btns">
                    <a
                      href="javascript:void(0);"
                      class="btn-r"
                      @click="cancelOrder"
                    >{{ $t('determine') }}</a>
                    <a
                      href="javascript:void(0);"
                      class="btn-g"
                      @click="showTips = 0"
                    >{{ $t('cancel') }}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /商品信息 -->
    </div>
  </div>
</template>

<script setup>
import * as util from '@/utils'
import Big from 'big.js'
import Cookie from 'vue-cookies'
import { ElMessage, ElMessageBox } from 'element-plus'

const formatDate = (val) => {
  if (val) {
    return util.tsToDate(val.replace(/-/g, '/'), 'Y-M-D')
  }
}
const store = useLanguageStore()
const router = useRouter()
const route = useRoute()
const orderInfo = ref({})
const discountAmount = computed(() => {
  return parseFloat(new Big(orderInfo.value.reduceAmount || 0).minus(Math.abs(orderInfo.value.freeTransfee || 0)).minus(Math.abs(orderInfo.value.platformFreeFreightAmount || 0)))
})
const carouserRef = ref(null)
const deliveryExpresse = ref(null) //  包裹信息
const offsetCount = ref(0) //  偏移数
watch(deliveryExpresse, () => {
  nextTick(() => {
    offsetCount.value = 0 // 初始化变量
    if (deliveryExpresse.value && carouserRef.value) {
      carouserRef.value.style.left = '0px'
    }
  })
})
const orderNumber = ref('')
onMounted(() => {
  orderNumber.value = route.query.orderNumber

  // 设置网页标题
  document.title = $t('orderDetails.orderDetails')
  getOrderDetail()
})
let timer = '' // 定时器
onBeforeUnmount(() => {
  clearTimeout(timer)
})

/**
 * 获取支付订单详情
 */
const betweenTime = ref({ day: '', hou: '', min: '', sec: '' }) // 订单支付倒计时
let betweenTimestamp = 0
const getOrderDet = () => {
  http.get('/p/order/getOrderPayInfoByOrderNumber', {
    params: {
      orderNumbers: orderNumber.value
    }
  }).then(({ data }) => {
    betweenTimestamp = util.betweenTimestamp(new Date().getTime(), util.dateToTimestamp(data.endTime))
    if (betweenTimestamp > 0) {
      betweenTime.value = util.betweenTime(betweenTimestamp)
      countdown()
    }
  })
}

/**
 * 倒计时
 */
const countdown = () => {
  betweenTimestamp = betweenTimestamp - 1000
  betweenTime.value = util.betweenTime(betweenTimestamp)
  if (Number(betweenTime.value.day === 0) && Number(betweenTime.value.hou === 0) && Number(betweenTime.value.min === 0) && Number(betweenTime.value.sec === 0)) {
    clearTimeout(timer)
    history.go(0)
  }
  timer = setTimeout(() => {
    countdown()
  }, 1000)
}

/**
 * 跳转详情页
 */
const userStore = useUserStore()
const toDetail = (prod) => {
  if (orderInfo.value.orderType === 2 && !orderInfo.value.seckillId) {
    ElMessage.warning($t('spike.currentSecondsAreOver'))
    return
  }
  let newPage
  if (orderInfo.value.orderType === 3) {
    newPage = router.resolve({ path: '/detail', query: { prodId: prod.prodId, scoreFee: prod.useScore } })
  } else {
    newPage = router.resolve({ path: '/detail', query: { prodId: prod.prodId } })
  }
  let userId = null
  if (Cookie.get('bbcToken')) {
    userId = userStore.userId
  }
  http.get('/prod/prodInfo', {
    params: {
      prodId: prod.prodId,
      userId
    }
  }).then(() => {
    window.open(newPage.href, '_blank', 'noopener,noreferrer')
  })
}

/**
 * 获取订单详情
 */
const unusedCount = ref(0) // 待使用的核销券
const userAddrDto = ref({})
const virtualRemarks = ref([]) // 全部留言列表
const virtualInfoList = ref([]) // 券码列表
const dvyType = ref(1) // 配送类型 1:快递 2:自提 3：无需快递
const isExpired = ref(false) // 判断有无超过有效时间
const giveawayList = ref([]) // 赠品列表
const getOrderDetail = () => {
  http.get('/p/myOrder/orderDetail', {
    params: {
      orderNumber: route.query.orderNumber
    }
  }).then(({ data }) => {
    // isRefunding: 是否有订单项正在退款
    data.isRefunding = data.orderItemDtos.findIndex(el => el.refundSn && el.returnMoneySts && el.returnMoneySts !== 5) > -1
    if (data.status === 1) {
      // 订单待支付则获取待支付订单详情
      getOrderDet()
    }
    dvyType.value = data.dvyType
    orderInfo.value = data
    // 官方自营店判断
    if (orderInfo.value.shopId === null) {
      orderInfo.value.shopId = 0
    }
    userAddrDto.value = data.userAddrDto // 地址Dto
    if (orderInfo.value.status >= 3) {
      getDeliveryDet()
    }
    if (dvyType.value === 2) {
      getStationDetail()
    }
    // 虚拟商品
    if (data.orderMold === 1) {
      // 留言列表（过滤没有填写的留言）
      const isVirtualRemarks = data.virtualRemark ? JSON.parse(data.virtualRemark) : []
      let remark = []
      if (isVirtualRemarks && isVirtualRemarks.length) {
        remark = isVirtualRemarks.filter(el => el.value)
      }
      virtualRemarks.value = remark || []

      // 当前卡券时间是否超过有效时间
      if (data.writeOffEnd) {
        const writeOffEndTime = new Date(data.writeOffEnd).getTime()
        const nowTime = new Date().getTime()
        if (nowTime > writeOffEndTime) {
          isExpired.value = true
        }
      }

      virtualInfoList.value = data.virtualInfoList || []

      // 计算待使用券码总数
      if (virtualInfoList.value && virtualInfoList.value.length) {
        let unusedCountTemp = 0
        virtualInfoList.value.forEach(el => {
          if (el.isWriteOff === 0) {
            unusedCountTemp = unusedCountTemp + 1
          }
        })
        unusedCount.value = unusedCountTemp
      }
    }
    // 赠品
    giveawayList.value = []
    if (orderInfo.value.orderItemDtos && orderInfo.value.orderItemDtos.length === 1) {
      giveawayList.value = orderInfo.value.orderItemDtos[0].giveawayList
    }
  }).catch(err => {
    ElMessageBox.alert(
      err.data.msg,
      $t('ucOrder.tips'),
      {
        confirmButtonText: $t('userCenter.confirm'),
        showClose: false,
        type: 'warning'
      }
    ).then(() => {
      router.push({ path: '/user-center/uc-order' })
    })
  })
}

// 获取自提点信息
const stationUserName = ref('') // 自提人名字
const stationUserMobile = ref('') // 自提人手机号
const stationAddress = ref('') // 自提地址
const getStationDetail = () => {
  http.get('/p/myStationOrder/stationDetail', {
    params: {
      orderNumber: route.query.orderNumber
    }
  }).then(({ data }) => {
    stationUserName.value = data.stationUserName // 自提人的名字
    stationUserMobile.value = data.stationUserMobile // 自提人的手机
    stationAddress.value = data.stationAddress // 自提点的地址
  })
}

// 获取物流详情
const deliveryList = ref([]) //  包裹集合
const getDeliveryDet = () => {
  http.get('/p/myDelivery/orderInfo/' + orderNumber.value).then(({ data }) => {
    if (data.length && data[0].deliveryDto && data[0].deliveryDto.traces) {
      data[0].deliveryDto.traces.reverse()
    }
    deliveryList.value = data // 包裹集合信息
    deliveryExpresse.value = data[0] // 包裹信息
  })
}

// 点击包裹tab事件
const indexs = ref(0)
const onClickTabDelivery = (index) => {
  indexs.value = index
  getDeliveryDtoById()
}

// 获取指定包裹的物流信息
const getDeliveryDtoById = () => {
  http.get('/p/myDelivery/deliveryOrder/' + deliveryList.value[indexs.value].orderDeliveryId).then(({ data }) => {
    if (data.deliveryDto && data.deliveryDto.traces) {
      data.deliveryDto.traces.reverse()
    }
    deliveryExpresse.value = data
  })
}

// 商品切换
const prevItem = () => {
  const len = deliveryExpresse.value.orderItems.length
  if (len - 5 > 0) {
    if (offsetCount.value > 0) {
      offsetCount.value--
      carouserRef.value.style.left = '-' + (70 * offsetCount.value) + 'px'
    } else {
      return false
    }
  } else if (len - 5 <= 0) {
    return false
  } else {
    return false
  }
}

const nextItem = () => {
  const len = deliveryExpresse.value.orderItems.length
  if (len - 5 > 0) {
    if (offsetCount.value < len - 5) {
      offsetCount.value++
      carouserRef.value.style.left = '-' + (70 * offsetCount.value) + 'px'
    } else if (len - 5 <= 0) {
      return false
    } else {
      return false
    }
  } else {
    return false
  }
}
/**
 * 跳转店铺页面
 */
const toShopPage = (shopId) => {
  if (shopId === 0) {
    router.push({ path: '/member-center/integral-mall' })
    return
  }
  router.push({ path: '/shop-index', query: { sid: shopId } })
}
/**
 * 跳转到个人中心
 */
const userCenter = () => {
  router.push({ path: '/user-center' })
}
/**
* 跳转到商品详情页
*/
const toProdDetails = (prodId) => {
  const newPage = router.resolve({ path: '/detail', query: { prodId } })
  let userId = null
  if (Cookie.get('bbcToken')) {
    userId = userStore.userId
  }
  http.get('/prod/prodInfo', {
    params: {
      prodId,
      userId
    }
  }).then(() => {
    window.open(newPage.href, '_blank', 'noopener,noreferrer')
  })
}
const toProdDetail = (prodId, scoreFee) => {
  if (orderInfo.value.orderType === 3) {
    let userId = null
    if (Cookie.get('bbcToken')) {
      userId = userStore.userId
    }
    http.get('/prod/prodInfo', {
      params: {
        prodId,
        userId
      }
    }).then(() => {
      const newPage = router.resolve({ path: '/detail', query: { prodId, scoreFee } })
      window.open(newPage.href, '_blank', 'noopener,noreferrer')
    })
  } else {
    toProdDetails(prodId)
  }
}

/**
 * 是否最后一个商品在执行单个商品退款事件
 */
const sum = ref([]) // 本单已申请单个退款的商品数组
let isLastProd = false // 最后一款商品
const applyLastProdRefund = () => {
  if (orderInfo.value.status === 2) { // 待发货状态下
    if (orderInfo.value.orderItemDtos.length > 1) { // 如果商品列表长度大于1
      const sumTemp = []
      // 遍历商品list
      orderInfo.value.orderItemDtos.forEach((el) => {
        if (el.refundSn) { // 如果拥有退款单号
          sumTemp.push(el)
          sum.value = sumTemp
        }
      })
      if (sum.value.length === orderInfo.value.orderItemDtos.length - 1) {
        // 如果拥有退款单号的商品数组长度等于商品列表数据长度-1，那么点击的这件商品就是最后一个订单项
        isLastProd = true
      }
    }
  }
}

/**
 * 申请退款
 */
const toApplyReturn = (orderItemId, refundType) => { // refundType退款单类型（1:整单退款,2:单个物品退
  const platformFreeFreightAmount = orderInfo.value.platformFreeFreightAmount
  const transfee = platformFreeFreightAmount ? Number.parseFloat(new Big(platformFreeFreightAmount).minus(orderInfo.value.transfee || 0)).valueOf() : orderInfo.value.transfee
  if (orderInfo.value.status === 2) { // 待发货
    if (refundType === 2) { // 单个退款
      applyLastProdRefund() // 是否最后一个订单项申请退款
      const orderItem = []
      orderInfo.value.orderItemDtos.forEach((el) => {
        el.isLastProd = isLastProd
        if (el.orderItemId === orderItemId) { // 如果当前的订单项id和点击传入的订单项id一致
          // 保存数据
          orderItem.push(el)
        }
      })
      const refundProdObj = {}
      refundProdObj.isOnlyProd = orderInfo.value.orderItemDtos.length === 1

      refundProdObj.refundType = refundType
      refundProdObj.orderItem = orderItem
      refundProdObj.buyerMobile = dvyType.value === 2 ? stationUserMobile.value : orderInfo.value.userAddrDto ? orderInfo.value.userAddrDto.mobile : ''
      localStorage.setItem('bbcRefundProdObj', JSON.stringify(refundProdObj)) // 将整个订单项保存
    } else if (refundType === 1) { // 整单退款
      const refundProdObj = {}
      refundProdObj.orderItem = orderInfo.value.orderItemDtos
      refundProdObj.refundType = refundType
      refundProdObj.actualTotal = orderInfo.value.actualTotal
      refundProdObj.buyerMobile = dvyType.value === 2 ? stationUserMobile.value : orderInfo.value.userAddrDto ? orderInfo.value.userAddrDto.mobile : ''
      localStorage.setItem('bbcRefundProdObj', JSON.stringify(refundProdObj)) // 将整个订单所有项保存
    }
    router.push({
      path: '/user-center/apply-return',
      query: {
        orderNumber: orderNumber.value,
        transfee,
        status: orderInfo.value.status,
        // actualTotal: orderInfo.actualTotal,
        refundType
      }
    })
  } else if (orderInfo.value.status !== 2) {
    if (refundType === 2) { // 单个退
      const orderItem = []
      orderInfo.value.orderItemDtos.forEach((el) => {
        if (el.orderItemId === orderItemId) { // 如果当前的订单项id和点击传入的订单项id一致
          // 保存数据
          orderItem.push(el)
        }
      })
      const refundProdObj = {}
      refundProdObj.orderItem = orderItem
      // 虚拟商品
      if (orderInfo.value.orderMold === 1) {
        // 1.无需核销：允许用户选择退款数量（writeOffNum 0无需核销 -1多次核销 1单次核销）
        refundProdObj.needWriteOffs = orderInfo.value.writeOffNum !== 0
        // 2.需要核销：展示最大可退款件数，不允许选择（最大可退款件数 = 待使用的核销券数）
        refundProdObj.maxRefundPieces = unusedCount.value
      }
      refundProdObj.platformCouponAmount = orderInfo.value.platformCouponAmount
      refundProdObj.memberAmount = orderInfo.value.memberAmount
      refundProdObj.refundType = refundType
      refundProdObj.buyerMobile = dvyType.value === 2 ? stationUserMobile.value : orderInfo.value.userAddrDto ? orderInfo.value.userAddrDto.mobile : ''
      localStorage.setItem('bbcRefundProdObj', JSON.stringify(refundProdObj)) // 将整个订单项保存
    } else if (refundType === 1) { // 整单退款
      const refundProdObj = {}
      refundProdObj.orderItem = orderInfo.value.orderItemDtos
      refundProdObj.actualTotal = orderInfo.value.actualTotal
      refundProdObj.orderType = orderInfo.value.orderType
      refundProdObj.refundType = refundType
      refundProdObj.buyerMobile = dvyType.value === 2 ? stationUserMobile.value : orderInfo.value.userAddrDto ? orderInfo.value.userAddrDto.mobile : ''
      localStorage.setItem('bbcRefundProdObj', JSON.stringify(refundProdObj)) // 将整个订单所有项保存
    }
    router.push({
      path: '/user-center/apply-return',
      query: {
        orderNumber: orderNumber.value,
        status: orderInfo.value.status,
        transfee,
        isLastProd,
        orderItemId, // 订单项id
        // actualTotal: orderInfo.actualTotal,
        refundType,
        orderMold: orderInfo.value.orderMold
      }
    })
  }
}
/**
 * 查看退款
 */
const toViewRefund = (refundSn, refundType, orderItemId, returnMoneySts) => {
  const platformFreeFreightAmount = orderInfo.value.platformFreeFreightAmount
  const transfee = platformFreeFreightAmount ? Number.parseFloat(new Big(platformFreeFreightAmount).minus(orderInfo.value.transfee)).valueOf() : orderInfo.value.transfee
  // returnMoneySts处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭)
  if (returnMoneySts < 4 && returnMoneySts !== -1) {
    if (refundType === 2) { // 单个退款
      orderInfo.value.orderItemDtos.forEach((el) => {
        if (el.orderItemId === orderItemId) { // 如果当前的订单项id和点击传入的订单项id一致
          // 保存数据
          const orderItem = []
          orderItem.push(el)
          localStorage.setItem('bbcOrderItem', JSON.stringify(orderItem)) // 将整个订单项保存
        }
      })
    } else if (refundType === 1) { // 整单退款
      localStorage.setItem('bbcOrderItem', JSON.stringify(orderInfo.value.orderItemDtos)) // 将整个订单所有项保存
    }
    toApplyReturn(orderItemId, refundType) // 申请售后
    // 申请售后（详情）页
    router.push({
      path: '/return-detail',
      query: {
        refundSn,
        transfee,
        orderNumber: orderNumber.value
      }
    })
  } else {
    // 退款详情页
    router.push({ path: '/return-detail', query: { refundSn, transfee } })
  }
}

/**
 * 立即支付
 */
const toPayment = () => {
  sessionStorage.setItem('bbcPay_total', orderInfo.value.actualTotal)
  sessionStorage.setItem('bbcPay_orderNumber', orderNumber.value)
  // 点击立即支付时再次请求判断订单状态
  http.get('/p/order/getOrderPayInfoByOrderNumber', {
    params: {
      orderNumbers: orderNumber.value
    }
  }).then(({ data }) => {
    // H5其它端取消订单时对订单状态加判断
    if (data.status !== 1) {
      ElMessage({
        message: $t('orderDetails.orderChanged'),
        type: 'warning',
        duration: 1000
      })
      setTimeout(() => {
        window.location.reload() // 刷新页面
      }, 1000)
    } else {
      router.push({ path: '/payment' })
    }
  })
}

/**
 * 取消订单
 */
const showTips = ref(false)
const cancelOrder = () => {
  showTips.value = false
  http.put('/p/myOrder/cancel/' + orderNumber.value).then(() => {
    ElMessage({
      type: 'success',
      message: $t('orderDetails.orderCancelled'),
      duration: 1000
    })
    router.push({ path: '/user-center/uc-order' })
  })
}

/**
 * 价格处理
 */
const parsePrice = (value) => {
  let val = Number(value)
  if (!val) {
    val = 0
  }
  // 截取小数点后两位，并以小数点为切割点将val转化为数组
  return val.toFixed(2).split('.')
}
/**
 * 查看发票
 */
const toInvoice = (orderNumber) => {
  router.push({
    path: '/invoice-detail',
    query: {
      orderNumber,
      orderInvoiceId: orderInfo.value.orderInvoiceId
    }
  })
}

</script>

<style lang="scss" scoped>
@use '../user-center/common/scss/user-center' as index-uc;
@use './index.scss';

</style>
